<style lang="less" scoped>
    .redPacketBox {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: #f8dd4a;
        overflow: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .redPacketHeader {
        width: 100%;
        img {
            max-width: 100%;
        }
    }
    .box{
        width: 100%;
        padding: 0 .3rem;
        margin-bottom: .26rem;
    }
    .redPacketQRCode {
        width: 100%;
        padding: 0.46rem 0.28rem .34rem;
        font-size: .26rem;
        color: #2c2c2f;
        text-align: center;
        background-color: #fbeb92;
        .redPacketQRCode_h {
            display: flex;
            justify-content: space-between;
            align-items: center;
            p{
                font-size: .3rem;
                color: #2c2c2f;
                 font-weight: 600;
            }
            span {
                display: block;
                width: 2.28rem;
                height: 2px;
                background-color: #2c2c2f;
            }
        }
        img {
            display: block;
            width: 3.6rem;
            height: 3.6rem;
            margin: .56rem auto .48rem;
            pointer-events: auto;

        }
    }
    .box:last-child .redPacketQRCode{
        text-align: left;
        .redPacketQRCode_h{
            margin-bottom: .2rem;
        }
        p{
            line-height: 1.5;
        }
        span{
            width: 2.4rem;
        }
    }
</style>
<template>
    <div class='redPacketBox' v-show="show">
        <div class="redPacketHeader">
            <img src="../../assets/img/grap_red.png" alt="">
        </div>
        <div class="box">
            <div class="redPacketQRCode">
                <div class="redPacketQRCode_h">
                    <span></span>
                    <p>扫码抢红包</p>
                    <span></span>
                </div>
                <img v-if="shareRedEnvelopeId" :src ="'http://qr.liantu.com/api.php?&w=360&text='+encodeURIComponent('https://m2.shbs008.com/#/activity/redPacket/'+ shareRedEnvelopeId)"  alt="">
                <p>长按扫码进入小程序，领取购物红包</p>
            </div>
        </div>
        <div class="box">
            <div class="redPacketQRCode">
                <div class="redPacketQRCode_h">
                    <span></span>
                    <p>活动规则</p>
                    <span></span>
                </div>
                <p>1.红包属性为随机红包，最高可抢10元，老用户可以直接使用，未注册用户需完成注册后方可使用，红包奖金在注册完成后直接进入红包账户。</p>
                <p>2.每个红包总额为10个，抢完失效。</p>
                <p>3.发放至铺连铺账户的红包登录铺连铺后即可使用。</p>
                <p>4.铺连铺保留法律范围内允许的对活动的解释权。</p>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'redPacket',
    data() {
      return {
        title: '扫码抢红包',
        shareRedEnvelopeId:'',
        show:false
      }
    },
    activated(){
      console.log(this.comJS.isWeixin())
        if(this.comJS.isWeixin()){
          this.show = true
        }else{
          this.show = true
        }
        this.Interactive.customStatistics({type: 2, eventID: 'activity_area',map: {name: this.title}})
        this.shareRedEnvelopeId = this.$route.query.shareRedEnvelopeId
    },
    methods:{
    }
  }
</script>